<template>
  <div class="nav-wrap">
    <div class="nav-wrap-box">
      <img src="../assets/logo.png" alt="" />
      <div class="address-wrap">
        <span>西安</span>
        <span class="sanjiao"></span>
        <!-- 隐藏位置 -->
        <div class="address-wrap-disp">
          <span class="el-icon-location-information"></span>
          <span>当前定位城市：西安</span>
          <div class="input-wrap-box">
            <div class="input-div">
              <input type="text" placeholder="搜索其他城市" />
            </div>
            <el-button plain>搜索</el-button>
          </div>
        </div>
      </div>
      <ul class="list-wrap">
        <li
          :class="{ activeLi: Mnum == index }"
          v-for="(item, index) in lists"
          @click="tabs(index)"
        >
          {{ item.app }}
        </li>
      </ul>
      <div class="saoma-wrap">
        <span class="el-icon-mobile-phone font-big"></span>
        <span>APP下载</span>
        <span class="sanjiao2"></span>
        <!-- 隐藏元素 -->
        <div class="saoma-wrap-wei">
          <img src="../assets/weixin.jpg" alt="" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="input-wrap-box">
          <input
            type="text"
            placeholder="找影视 、影院"
            @keyup.13="enterKey"
            v-model="searchInp"
          />
          <span class="el-icon-search iconfont-search" @click="searchs()"></span>
        </div>
      </div>
      <div class="avatar-wrap">
        <img :src="avatarImg ? avatarImg : defaultAvatar" alt="" />
        <span class="sanjiao3"></span>
        <div class="avatar-wrap-exit">
          <p @click="logins()" v-show="shows">登录</p>
          <div v-show="!shows" class="loginTrue">
            <span @click="dindan()">我的订单</span>
            <span @click="xinxi()">基本信息</span>
            <span @click="exit()">退出登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sessionLogin from '../http/session'
import { mapState } from "vuex";
export default {
  name: "navs",
  data() {
    return {
      shows: true,
      searchInp: "",
      lists: [
        {
          app: "首页",
        },
        {
          app: "电影",
        },
        {
          app: "影院",
        },
        {
          app: "演出",
        },
        {
          app: "榜单",
        },
        {
          app: "热点",
        },
        {
          app: "商城",
        },
      ],
      Mnum: 0,
      userName: [],
      avatars: false, //解决过早渲染
      avatarImg: "", //请求头像
      defaultAvatar: require("../assets/avatar.png"), //防止webpack打包时找不到路径
    };
  },
  computed: {
    ...mapState(["movie"]),
    count() {
      console.log(this.movie.movieing);
      console.log(123);
    },
  },
  mounted() {
    //查询当前登录状态的用户信息
      sessionLogin().then(res=>{
        this.userName = res.data.data;
          this.avatars = true;
          this.avatarImg = res.data.data[0].avatar;
          this.shows = false
          this.avatars = true
      }).catch(err=>{
        console.log(err);
      })
  },
  created() {},
  watch: {
    // avatars(news) {
    // },
  },
  methods: {
    tabs(index) {
      this.Mnum = index;
      if (index == 0) {
        this.$router.push("/");
      } else if (index == 1) {
        this.$router.push("/movie");
      } else if (index == 2) {
        this.$router.push("/cinema");
      } else if (index == 3) {
        this.$router.push("/show");
      } else if (index == 4) {
        this.$router.push("/listop");
      } else if (index == 5) {
        this.$router.push("/broad");
      } else if (index == 6) {
        this.$router.push("/shop");
      }
    },
    logins() {
      this.$router.push("/login");
    },
    searchs() {
      let urls = this.$router.resolve({
        path: "/search",
        query: { title1: this.searchInp },
      });
      window.open(urls.href, "_blank");
      this.searchInp = "";
    },
    // 回车搜索
    enterKey() {
      this.searchs();
    },
    // 订单
    dindan() {
      this.$router.push("/Mycenter");
    },
    xinxi() {
      this.$router.push("/Mycenter");
    },
    exit() {
      sessionStorage.removeItem("cookie-session")
      this.$router.replace('/login/login')
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-wrap {
  background: #fff;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  border-bottom: 1px solid rgb(187, 185, 185);
  .nav-wrap-box {
    display: flex;
    width: 1200px;
    height: 80px;
    /* background: rgb(128, 185, 223); */
    margin: 0 auto;
    .avatar-wrap:hover .avatar-wrap-exit {
      display: block;
    }
    .avatar-wrap:hover .sanjiao3 {
      transform: rotate(180deg);
    }
    .avatar-wrap {
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      >img{
        border-radius: 50%;
      }
      .avatar-wrap-exit {
        display: none;
        width: 100px;
        /* max-height: 80px; */
        min-height: 60px;
        background: #ffffff;
        position: absolute;
        top: 79px;
        left: 10px;
        border: 1px solid rgb(212, 209, 209);
        border-top: none;
        .loginTrue {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-items: center;
          span {
            margin: 10px 0;
            cursor: pointer;
          }
          span:hover {
            color: rgb(224, 29, 29);
          }
        }
        p {
          text-align: center;
          line-height: 60px;
          color: rgb(146, 143, 143);
          cursor: pointer;
        }
        p:hover {
          color: rgb(224, 29, 29);
        }
      }
      img {
        height: 40px;
        width: 40px;
        margin: 0 5px 0 30px;
      }
      .sanjiao3 {
        display: inline-block;
        width: 0;
        height: 0;
        border: 5px solid rgb(255, 255, 255);
        border-top-color: rgb(61, 63, 62);
        transition: 0.2s all;
      }
    }
    .input-wrap {
      width: 220px;
      height: 80px;
      display: flex;
      align-items: center;
      .input-wrap-box {
        display: flex;
        justify-content: space-between;
        width: 220px;
        height: 40px;
        border-radius: 20px;
        border: 1px solid rgb(136, 132, 132);
        border-right: none;
        box-sizing: border-box;
        input {
          width: 145px;
          border: none;
          height: 100%;
          border-radius: 20px;
          padding: 0 15px;
          outline: none;
        }
      }
    }
    img {
      height: 80px;
      width: auto;
    }

    .address-wrap:hover .address-wrap-disp {
      display: block;
    }
    .address-wrap:hover .sanjiao {
      transform: rotate(180deg);
    }
    .address-wrap {
      position: relative;
      line-height: 80px;
      width: 70px;
      height: 80px;
      .sanjiao {
        display: inline-block;
        width: 0;
        height: 0;
        border: 6px solid rgb(255, 255, 255);
        border-top-color: rgb(61, 63, 62);
        transition: 0.2s all;
      }
      .address-wrap-disp {
        display: none;
        position: absolute;
        top: 80px;
        left: -3px;
        width: 490px;
        height: 180px;
        border: solid 1px rgb(214, 214, 214);
        background: #fff;
        border-radius: 2px;
        padding: 20px;
        span {
          color: #ed4036;
          font-size: 20px;
        }
        .input-wrap-box {
          display: flex;
          align-items: center;
          .input-div {
            width: 350px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid #409eff;
            display: flex;
            margin-right: 10px;
            justify-content: space-between;
            input {
              padding: 0 10px;
              width: 100%;
              height: 40px;
              list-style: none;
              outline: none;
              background: none;
              border: none;
            }
          }
        }
      }
    }
    .list-wrap {
      list-style: none;
      display: flex;
      li {
        text-align: center;
        line-height: 80px;
        width: 70px;
        height: 80px;
        font-size: 18px;
        color: #333;
        cursor: pointer;
      }
      li:hover {
        color: #ee4137;
      }
    }
    .saoma-wrap:hover .sanjiao2 {
      transform: rotate(180deg);
    }
    .saoma-wrap:hover .saoma-wrap-wei {
      display: block;
    }
    .saoma-wrap {
      width: 132px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      cursor: pointer;
      position: relative;
      .sanjiao2 {
        display: inline-block;
        width: 0;
        height: 0;
        border: 6px solid rgb(255, 255, 255);
        border-top-color: rgb(61, 63, 62);
        transition: 0.2s all;
      }
      .saoma-wrap-wei {
        display: none;
        width: 120px;
        height: 120px;
        position: absolute;
        top: 80px;
        left: 12px;
        img {
          width: 120px;
          height: 120px;
        }
      }
    }
  }
}
.activeLi {
  background: #ee4137;
  color: #fff !important;
  font-weight: bold;
}
.font-big {
  font-size: 20px;
}
.iconfont-search {
  display: inline-block;
  font-size: 20px;
  width: 40px;
  height: 40px;
  background: #ee4137;
  border-radius: 50%;
  color: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
</style>
